<template>
  <div class="notifacation-item row q-ma-xs justify-between">
    <div class="left row items-center">
      <q-avatar class="q-mx-md">
        <img src="/images/default-avatar.png" />
      </q-avatar>
      <div class="name">{{ name }}</div>
      <div class="action q-mx-md">{{ action }}</div>
    </div>
    <div class="right">
      <q-img width="105px" height="100%" src="images/video.png" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'notifacation',
  props: {
    avatar: String,
    name: String,
    action: String,
    videoPreview: String,
  },
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.notifacation-item {
  background-color: #242424;
  height: 60px;
  width: 700px;
  font-size: 14px;
  .left {
    .name {
      color: #f9f9f9;
    }
    .action {
      color: #808080;
    }
  }
}
</style>
